<template>
    <div>
        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>图谱数据批量导入</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <el-form>
                    <el-row gutter="10">
                        <el-col :span="20">
                            <el-input placeholder="此处是一个没完成的文件选择框"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button @click="download" type="primary">模板下载</el-button>
                            <el-button @click="submit" type="primary">数据上传</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </div>
        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>图谱数据人工导入</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <el-form :inline="true">
                    <el-row v-for="(prop, index) in props" :key="index">
                        <el-col :span="6">
                            <el-form-item label="属性标识">
                                <el-select v-model="value" filterable placeholder="请选择">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="属性名称">
                                <el-input placeholder></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="属性值">
                                <el-input placeholder></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="属性类型">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <el-row class="submit-row">
                    <el-col cols="2">
                        <el-button @click="submit1" type="primary">重置所有</el-button>
                        <el-button @click="submit1" type="primary">提交实体</el-button>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "Import",
    data() {
        return {
            props: [
                {
                    ename: "Name",
                    cname: "中文名",
                    value: "xxxxx",
                    type: null
                },
                {
                    ename: "Name",
                    cname: "中文名",
                    value: "xxxxx",
                    type: null
                }
            ],
            options: [
                {
                    value: "选项1",
                    label: "黄金糕"
                },
                {
                    value: "选项2",
                    label: "双皮奶"
                },
                {
                    value: "选项3",
                    label: "蚵仔煎"
                },
                {
                    value: "选项4",
                    label: "龙须面"
                },
                {
                    value: "选项5",
                    label: "北京烤鸭"
                }
            ],
            value: ""
        };
    },
    methods: {}
};
</script>

<style scoped>
.section {
    padding: 10px;
}

.submit-row {
    text-align: center;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "浏览";
}
</style>